<script setup>
  import {ref,watch} from 'vue'
  import {storeToRefs} from 'pinia'
  import {useShoppingCartStore } from '@/stores'

  /**
   * 显示状态双向绑定
   */
  const popup = ref(null)
  const show = defineModel('show',{type:Boolean,default:false})
  watch(show,() =>{ 
    show.value ? popup.value.open()
               : popup.value.close()
  })
  function handleChange(e){
    // todo:购物车是空，提醒，不做动作
    show.value = e.show
  }

  /**
   *  购物车操作
   */
  const {goodCount,goodList } = storeToRefs(useShoppingCartStore())
  const {clearCart} = useShoppingCartStore()
  const allCheck = ref(false)




</script>
<template>
  <uni-popup class="popup" ref="popup" type="bottom" border-radius="20rpx 20rpx 0 0" @change="handleChange">
    <view class="lucky-popup-content">
      <view class="title">
        <radio :checked="allCheck"></radio>
        <text class="title-info">已选购商品({{ goodCount }}件) </text>
        <view class="title-action" @click="clearCart">
          <uni-icons type="trash-filled" color="#ABABAB"></uni-icons>
          <text>清空购物车</text>
        </view>
      </view>
      <view class="good-list">
        <LuckyGoodItem v-for="good in goodList" :data="good" scene="cart"></LuckyGoodItem>
      </view>
      <view class="safe-area"> </view>
    </view>
  </uni-popup>
</template>
<style lang="less" scoped>
  .popup {
    // height:400rpx;
    z-index:998;
    @popupRadius:20rpx;
    .lucky-popup-content {
      border-radius:@popupRadius @popupRadius 0 0;
      overflow: hidden;
      // height:500rpx;
      background-color: #fff;
      z-index:998;
      display:flex;
      flex-direction: column;
      justify-content: flex-end;
      .title {
        height:90rpx;
        background-color: #fff;
        display:flex;
        align-items: center;
        padding:0 10rpx;
        .title-info {
          flex:1;
        }
        .title-action {
          display:flex;
          align-items: center;
          color:#ABABAB;
        }
      }
      .good-list {
        background-color: #FFF9F7;
        min-height:200rpx;
      }
      .safe-area {
        height:230rpx;
      }
    }
  }
</style>